<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, watch } from 'vue';

const router = useRouter();
const route = useRoute();
const breadcrumbs = ref([]);

const navigateTo = (path) => {
  router.push(path);
};

// 监听路由变化，更新面包屑
watch(() => route.path, () => {
  updateBreadcrumbs();
});

function updateBreadcrumbs() {
  const matched = route.matched.filter(record => record.meta && record.meta.title);
  breadcrumbs.value = matched.map(record => ({
    path: record.path,
    meta: {
      title: record.meta.title,
      link: record.meta.link !== false
    }
  }));
}
const isCollapse = ref(false);
// 初始化面包屑
updateBreadcrumbs();
</script>


<template>
  <div>
    <el-container class="Home">
      <!-- 侧边栏 -->
      <el-aside class="el-aside">
        <div class="label">
          首页
        </div>
        <el-menu :collapse="isCollapse" class="el-menu" default-active="1">
          <el-sub-menu index="1">
            <template #title>
              <i class="el-icon-menu"></i>
              <span>基本信息</span>
            </template>
            <el-menu-item class="el-menu-item" @click="navigateTo('/employ');" index="1-1">员工管理</el-menu-item>
            <el-menu-item  @click="navigateTo('/goods')" index="1-2">商品管理</el-menu-item>
            <el-menu-item  @click="navigateTo('/customer')" index="1-3">顾客管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <i class="el-icon-menu"></i>
              <span>采购信息</span>
            </template>
            <el-menu-item @click="navigateTo('/purchasingMaster')"  index="2-1">采购主表</el-menu-item>
            <el-menu-item @click="navigateTo('/pay_detail')" index="2-2">采购明细</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>

        <!-- 头部 -->
        <el-header class="el_header">
          <i class="el-icon-menu"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">
              <router-link v-if="item.meta.link" :to="item.path">{{ item.meta.title }}</router-link>
              <span v-else>{{ item.meta.title }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end; cursor: default">
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center;">
                <img src="@/pictures/manager.jpg" alt="" style="width: 40px; height: 40px; margin-left: -10px; margin-right: 10px;">
                <span>管理员</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="navigateTo('/login')" >退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主体 -->
        <el-main class="el-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.Home {
  background: url("../../pictures/Managementbac.jpg") center center fixed;
  background-size: cover;
}

.el-aside {
  width: 200px;
  height: 1000px;
  background: rgba(211, 211, 211, 0.4);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  backdrop-filter: blur(4px);
}

.label {
  height: 80px;
  width: 200px;
  background: rgba(235, 235, 235, 0.4);
  display: flex;
  color: black;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.el_header {
  height: 80px;
  background: rgba(211, 211, 211, 0.4);
  display: flex;
  align-items: center;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  backdrop-filter: blur(4px);
}

.el-main,
.el-menu {
  background: rgba(235, 235, 235, 0.4);
  backdrop-filter: blur(4px);
}

.el-menu-item {
  background: rgba(214, 214, 214, 0.06);
  backdrop-filter: blur(2px);
}
</style>
